<template>
    <div class="loading-box">
        <div class=" circle circle1"></div>
        <div class="circle circle2"></div>
    </div>
</template>
<style scoped>
.loading-box{
    margin: 5px;
    height: 35px;
    position: relative;
}
.circle{
    width: 25px;
    height: 25px;
    border: 5px solid rgba(0,0,0,0.3);
    border-radius: 50px; 
    position: absolute;
    left: 50%;
    transform: translateX(-50%); 
    /*往左边自身的50%*/
}
.circle2{
    border-color:transparent;
    border-top-color: rgba(0,0,0,0.5);
    border-right-color:rgba(0,0,0,0.5) ;
    transform-origin: left;/*动画执行的参照点*/
    animation: rote 1s linear infinite; /* 执行rote关键帧动画,执行一次花费两秒,匀速运行,infinite执行次数*/
}
/* 定义关键字动画 */
@keyframes rote{
    0%{
        transform: rotate(0deg) translate(-50%);
    }
    25%{
        transform: rotate(90deg) translate(-50%);
    }
    50%{
        transform: rotate(180deg) translate(-50%);
    }
    75%{
        transform: rotate(270deg) translate(-50%);
    }
    100%{
        transform: rotate(360deg) translate(-50%);
    }

}
</style>